<template>
  <div>
    <el-card class="box-card-3">
      <el-row class="recommend-list-title">推荐阅读</el-row>
      <el-row v-for=" r in recommendList" class="recommend-list-body">
        <el-row><a href="javascript:void(0)" class="body-article-title">{{r.title}}</a></el-row>
        <el-row class="body-article-content"><span>阅读数</span><span>{{r.reads}}</span></el-row>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "RecommendArticle",
    data() {
      return {
      recommendList: [
        {
          title: 'Windows端非常好用的小工具（上）',
          reads: 114,
        },
        {
          title: '如何拥有一台24小时运行的远程个人计算机？',
          reads: 514,
        },
        {
          title: 'vue后台管理系统实践方案总结——简易电商后管',
          reads: 1919,
        },
      ]
      }
    },
  }
</script>

<style scoped lang="less">
  .el-card{
    margin-top: 20px;
  }

  .recommend-list-title {
    border-left: #ec6e56 5px solid;
    padding-left: 10px;

    span {
      margin-right: 10px;
    }
  }

  .recommend-list-body {
    margin-bottom: 15px;
  }

  .body-article-title {
    font-size: 14px;
    line-height: 22px;
    color: #333333;
  }

  .body-article-content {
    font-size: 12px;
    color: #969696;
    span {
      margin-right: 6px;
    }
  }


</style>